<template>
	<view v-if="detail !== null">
    <uni-card >
      <template v-slot:title>
        <view class="uni-card__header">
          <!-- 卡片标题 -->
          <view class="uni-card__header-box">
            <view class="uni-card__header-content">
              <text class="uni-card__header-content-title uni-ellipsis">{{ showOrderStatusDesc(detail.status) }}</text>
            </view>
          </view>
          <view class="uni-card__header-extra">
            <text class="uni-card__header-extra-text">¥‌{{ detail.totalAmount }}</text>
          </view>
        </view>
      </template>
      <view>
        <view>
          <text>订单号: {{ detail.orderNo }}</text>
        </view>
        <view>
          <text>订单时间: {{ detail.createTime }}</text>
        </view>
      </view>
    </uni-card>
    <view class="container-one margin">
      <template v-if="detail.status === 0">
        <button class="uni-button" size="mini" type="warn" @click.stop="cancelOrder(detail.id)"
                :disabled="is_processing" :loading="is_processing">
          取消
        </button>
      </template>
    </view>
    <uni-card class="margin-top-0">
      <view class="font-bold">{{ detail.hotelName }}</view>
      <view>{{ detail.roomType }}</view>
      <view>{{ detail.checkInDate }} 至 {{ detail.checkOutDate }}</view>
      <view> <text class="font-bold">{{ detail.roomCount}} 间</text></view>
    </uni-card>
		<uni-card title="入住人信息" type="line">
			<view v-for="(info, index) of detail.passengers" :key="index">
				<view>姓名: {{ info.name }} </view>
			</view>
		</uni-card>
		<uni-card title="价格信息" type="line">
			<view class="flex-direction" v-for="(rp, index) of detail.prices" :key="index">
				<view class="flex">{{ rp.effectiveDate }} ¥‌{{ rp.inclusiveAmount }}
          <text v-if="rp.mealCount === 0"> 无早</text>
          <text v-else> {{ rp.mealCount }} {{ rp.mealType }}</text>
        </view>
			</view>
		</uni-card>
		<uni-card title="其它信息" type="line">
			<view class="flex-direction">
				<view class="">成本中心: {{ detail.costCenter }}</view>
				<view class="">项目名称: {{ detail.projectName }}</view>
				<view class="">备注: {{ detail.remark }}</view>
				<view class="">最晚到店时间: {{ detail.lastArriveTime }}</view>
			</view>
		</uni-card>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
  import {
    onNavigationBarButtonTap
  } from '@dcloudio/uni-app'
	import {
		showPayType,
	} from "@/common/api/common.js";

	import {
		searchHotelOrder,
		showHotelOrderStatus,
		cancelHotelOrder,
	} from "@/common/api/hotel.js";
	
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	let detail = ref(null)
	let id = ref(0)
	let orderNo = ""
	let is_processing = ref(false)

	onLoad((options) => {
		// console.log('页面加载完成', options);
		id.value = parseInt(options.id)
		// console.log('id: ', id.value)
		console.log('onLoad......')
		search()
	})

	function search() {
		searchHotelOrder(id.value, (val) => {
			console.log(val)
			detail.value = val;
		});
	}
	
	function cancelOrder(id) {
		let remark = "通过小程序取消"
		let params = {
			"remark": remark
		}
		is_processing = true
		cancelHotelOrder(id, params, (val) => {
			is_processing = false
			console.log(val)
			if (val.errcode === 0) {
				uni.showToast({
					title: '订单取消成功'
				})
				
				search()
			} else {
				uni.showToast({
					title: val.errmsg,
					icon: 'none',
					duration: 3000
				})
			}
		})
	}

	function getStatusDesc(status) {
		return showHotelOrderStatus(status);
	}

	function getPayTypeDesc(payType) {
		return showPayType(payType);
	}

	function showOrderStatusDesc(orderStatus) {
		return showHotelOrderStatus(orderStatus)
	}

  onNavigationBarButtonTap((e) => {
    // console.log(e)
    if (e.type === 'home') {
      uni.reLaunch({url: '/pages/home/home'})
    }
  });
</script>

<style lang="scss">
	.container {
		display: grid;
		// height: 150rpx;
		grid-template-columns: 3fr 7fr;
	}

  $uni-border-3: #EBEEF5 !default;
  $uni-shadow-base:0 0px 6px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
  $uni-main-color: #3a3a3a !default;
  $uni-base-color: #6a6a6a !default;
  $uni-secondary-color: #b60f43 !default;
  $uni-spacing-sm: 8px !default;
  $uni-border-color:$uni-border-3;
  $uni-shadow: $uni-shadow-base;
  $uni-card-title: 15px;
  $uni-cart-title-color:$uni-main-color;
  $uni-card-subtitle: 12px;
  $uni-cart-subtitle-color:$uni-secondary-color;
  $uni-card-spacing: 10px;
  $uni-card-content-color: $uni-base-color;

  .uni-card__header {
    display: flex;
    border-bottom: 1px $uni-border-color solid;
    flex-direction: row;
    align-items: center;
    padding: $uni-card-spacing;
    overflow: hidden;

    .uni-card__header-box {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex: 1;
      flex-direction: row;
      align-items: center;
      overflow: hidden;
    }

    .uni-card__header-avatar {
      width: 40px;
      height: 40px;
      overflow: hidden;
      border-radius: 5px;
      margin-right: $uni-card-spacing;
      .uni-card__header-avatar-image {
        flex: 1;
        width: 40px;
        height: 40px;
      }
    }

    .uni-card__header-content {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      flex: 1;
      // height: 40px;
      overflow: hidden;

      .uni-card__header-content-title {
        font-size: $uni-card-title;
        color: $uni-cart-title-color;
        // line-height: 22px;
      }

      .uni-card__header-content-subtitle {
        font-size: $uni-card-subtitle;
        margin-top: 5px;
        color: $uni-cart-subtitle-color;
      }
    }

    .uni-card__header-extra {
      line-height: 12px;

      .uni-card__header-extra-text {
        font-size: 16px;
        color: $uni-cart-subtitle-color;
      }
    }
  }
</style>